<template>
    <div class="moral-education">
      <!-- 顶部横幅 -->
      <div class="banner">
        <div class="banner-text">德育</div>
      </div>
  
      <!-- 九宫格菜单 -->
      <div class="menu-grid">
        <div v-for="item in menuItems" :key="item.text" class="menu-item">
          <div class="icon-wrapper">
            <img :src="item.icon" :alt="item.text" class="menu-icon"/>
          </div>
          <span class="menu-text">{{ item.text }}</span>
        </div>
      </div>
  
      <!-- 党史学习内容区 -->
      <div class="content-section">
        <div class="section-header">
          <span class="section-title">党史学习</span>
          <el-icon><ArrowRight /></el-icon>
        </div>
        
        <!-- 新闻列表 -->
        <div class="news-list">
          <div class="news-item">
            <div class="news-text">
              图画百年|学习新思想 做好接班人动听百年|"童心向党"班会活动
            </div>
            <div class="news-more">
              寻访红色足迹第四届全国中小学生电影周|更多
            </div>
          </div>
  
          <div class="news-card">
            <img src="https://dummyimage.com/120x80/ff6b6b/fff&text=建军节" class="news-image"/>
            <div class="news-info">
              <div class="news-title">"八一建军节"的由来</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ArrowRight } from '@element-plus/icons-vue'
  
  const menuItems = [
    {
      text: '党史学习',
      icon: 'https://dummyimage.com/48x48/ff6b6b/fff&text=党',
    },
    {
      text: '爱国主义',
      icon: 'https://dummyimage.com/48x48/ff6b6b/fff&text=爱',
    },
    {
      text: '宪法法治',
      icon: 'https://dummyimage.com/48x48/ff6b6b/fff&text=法',
    },
    {
      text: '品德教育',
      icon: 'https://dummyimage.com/48x48/ff6b6b/fff&text=德',
    },
    {
      text: '思政课程',
      icon: 'https://dummyimage.com/48x48/ff6b6b/fff&text=思',
    },
    {
      text: '优秀传统文化',
      icon: 'https://dummyimage.com/48x48/ff6b6b/fff&text=文',
    },
    {
      text: '生命与安全',
      icon: 'https://dummyimage.com/48x48/ff6b6b/fff&text=安',
    },
    {
      text: '心理健康',
      icon: 'https://dummyimage.com/48x48/ff6b6b/fff&text=心',
    },
    {
      text: '生态文明',
      icon: 'https://dummyimage.com/48x48/ff6b6b/fff&text=生',
    }
  ]
  </script>
  
  <style scoped>
  .moral-education {
    min-height: 100vh;
    background: #f7f8fa;
    padding-bottom: 14vw;
  }
  
  .banner {
    height: 40vw;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8585 100%);
    display: flex;
    align-items: center;
    padding: 0 5vw;
    position: relative;
    overflow: hidden;
  }
  
  .banner::after {
    content: '德育';
    position: absolute;
    right: 5vw;
    bottom: -5vw;
    font-size: 20vw;
    color: rgba(255, 255, 255, 0.1);
    font-weight: bold;
  }
  
  .banner-text {
    color: #fff;
    font-size: 8vw;
    font-weight: bold;
  }
  
  .menu-grid {
    margin: 4vw;
    padding: 4vw;
    background: #fff;
    border-radius: 3vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4vw;
  }
  
  .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vw;
  }
  
  .icon-wrapper {
    width: 12vw;
    height: 12vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .menu-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .menu-text {
    font-size: 3.2vw;
    color: #333;
  }
  
  .content-section {
    margin: 4vw;
    padding: 4vw;
    background: #fff;
    border-radius: 3vw;
  }
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3vw;
  }
  
  .section-title {
    font-size: 4vw;
    font-weight: 500;
    position: relative;
  }
  
  .news-list {
    display: flex;
    flex-direction: column;
    gap: 3vw;
  }
  
  .news-item {
    background: #fff5f5;
    padding: 3vw;
    border-radius: 2vw;
  }
  
  .news-text {
    font-size: 3.6vw;
    color: #333;
    margin-bottom: 2vw;
    line-height: 1.5;
  }
  
  .news-more {
    font-size: 3.2vw;
    color: #666;
  }
  
  .news-card {
    display: flex;
    gap: 3vw;
  }
  
  .news-image {
    width: 30vw;
    height: 20vw;
    border-radius: 2vw;
    object-fit: cover;
  }
  
  .news-info {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .news-title {
    font-size: 3.6vw;
    font-weight: 500;
    color: #333;
  }
  </style>